<template>
    <div class="product-index yuan-container">
        <a-card title="成品出库">
            <div class="filter-panel">
                <a-input-search class="filter-list" allowClear v-model="keywords" placeholder="品名" @search="resetList" />
                <div class="filter-list">
                    <span>状态：</span>
                    <a-select style="width: 200px;margin-right: 10px" v-model="searchStatus" @change="handleChange" allowClear>
                        <a-select-option v-for="item in areaList" :key="item.id"
                            :value="item.type">{{item.type}}</a-select-option>
                    </a-select>
                </div>
                <div class="filter-list">
                    <span>客户：</span>
                    <a-select style="width: 200px;margin-right: 10px" v-model="searchStatus" @change="handleChange" allowClear>
                        <a-select-option v-for="item in areaList" :key="item.id"
                            :value="item.type">{{item.type}}</a-select-option>
                    </a-select>
                </div>

                <a-button type="primary" @click="add" class="filter-list" style="float: right;">新增</a-button>

            </div>
            <div class="table">
                <a-table bordered :rowKey="getRowKey" :columns="columns" :data-source="pageList" :pagination="pagination"
                    :loading="loading"></a-table>
            </div>
        </a-card>
        <Add :visible="addProductVisible" @closeModal="() => addProductVisible = false" :editId="editId" @resetList="getList" />
        <Detail :visible="detailProductVisible" @closeModal="() => detailProductVisible = false" :editId="editId" />
    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { h } from "vue";
import nextApi, { ProductionListRes } from "@/api/nextApi";
import Add from "./components/Add.vue";
import Detail from "./components/Detail.vue";
@Component({
    name: "productionManagementIndex",
    components: { Add, Detail },
})
export default class extends Vue {
    keywords = "";
    loading = false;
    pagination = {
        pageSize: 10,
        current: 1,
        total: 0,
        showTotal: (total: number) => `共${total}条`,
        onChange: this.pageChange,
    };
    pageList: ProductionListRes[] = [];
    columns = [
        {
            title: "序号",
            dataIndex: "index",
            key: "index",
            align: "center",
            customRender: (text: string, record: ProductionListRes, index: number) => `${index + 1}`,
        },
        {
            align: "center",
            dataIndex: "varietyName",
            key: "varietyName",
            title: "品名",
        },
        {
            align: "center",
            dataIndex: "productionBatch",
            key: "productionBatch",
            title: "生产批号",
        },
        {
            align: "center",
            dataIndex: "productionTime",
            key: "productionTime",
            title: "生产日期",
        },
        {
            align: "center",
            dataIndex: "practicalYield",
            key: "practicalYield",
            title: "生产数量",
            customRender: (text: string, record: ProductionListRes, index: number) => `${record.practicalYield}${record.unit}`,
        },
        {
            align: "center",
            dataIndex: "surplus",
            key: "surplus",
            title: "剩余量",
            customRender: (text: string, record: ProductionListRes, index: number) => `${record.surplus}${record.unit}`,
        },
        {
            align: "center",
            dataIndex: "principal",
            key: "principal",
            title: "操作人",
        },
        {
            align: "center",
            dataIndex: "packState",
            key: "packState",
            title: "状态",
            customRender: (text: string, record: ProductionListRes, index: number) => {
                const stateBox = h(
                    "div",
                    { class: record.packState === 0 ? "" : "c-success" },
                    record.packState === 0 ? "未包装" : "已包装"
                );
                return stateBox;
            },
        },
        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 260,
            customRender: (text: string, record: ProductionListRes, index: number) => {
                return h("div", [
                    h(
                        "a-button",
                        {
                            style: { marginRight: "5px" },
                            props: { icon: "eye", type: "primary", size: "small" },
                            on: { click: () => this.showDetail(record) },
                        },
                        "详情"
                    ),
                    h(
                        "a-button",
                        {
                            style: { marginRight: "5px" },
                            props: { icon: "edit", type: "primary", size: "small" },
                            on: { click: () => this.editDetail(record) },
                        },
                        "编辑"
                    ),
                    h(
                        "a-popconfirm",
                        {
                            props: { title: "确定要删除吗？", okText: "确定", cancelText: "取消" },
                            on: { confirm: () => this.remove(record) },
                        },
                        [
                            h(
                                "a-button",
                                {
                                    props: { icon: "delete", type: "danger", size: "small" },
                                },
                                "删除"
                            ),
                        ]
                    ),
                ]);
            },
        },
    ];

    getRowKey(item: any) {
        return item.id;
    }

    async getList() {
        this.pageList = [];
        try {
            this.loading = true;
            const res = await nextApi.getProList({
                pageSize: this.pagination.pageSize,
                pageNum: this.pagination.current,
                varietyName: this.keywords,
            });
            this.pagination.total = res.data?.total || 0;
            this.pageList = res.data?.rows || [];
        } finally {
            this.loading = false;
        }
    }
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }
    detailProductVisible = false;
    showDetail(item: ProductionListRes) {
        this.detailProductVisible = true;
    }

    addProductVisible = false;

    editId = "";
    editDetail(item: ProductionListRes) {
        this.editId = item.id;
        this.addProductVisible = true;
    }
    add() {
        this.editId = "";
        this.addProductVisible = true;
    }
    async remove(item: ProductionListRes) {
        this.loading = true;
        try {
            const res = await nextApi.deletePro(item.id);
            this.$message.success(res.msg);
            this.getList();
        } finally {
            this.loading = false;
        }
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;

        this.getList();
    }
    async mounted() {
        this.getList();
    }
}
</script>
<style lang="scss">
.product-index {
    padding: 20px;
}
</style>
